<template>
  <div class="out-warehouse-receipt-page">
    <div class="search-wrapper">
      <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle"></super-search>
    </div>
    <div class="content-wrapper">
      <a-tabs v-model:activeKey="activeKey" @change="changeTabHandle">
        <!-- <a-tab-pane key="0" :tab="`待下单(${pageStat['0']})`"></a-tab-pane> -->
        <a-tab-pane key="1" :tab="`待审核(${pageStat['1']})`"></a-tab-pane>
        <a-tab-pane key="2" :tab="`审核通过(${pageStat['2']})`"></a-tab-pane>
        <a-tab-pane key="3" :tab="`驳回(${pageStat['3']})`"></a-tab-pane>
      </a-tabs>
      <super-table
        :height="tableHeight"
        ref="tableRef"
        :activeKey="activeKey"
        v-model:page="searchForm.pageNum"
        v-model:limit="searchForm.pageSize"
        :loading="loading"
        :data="tableData"
        :total="searchForm.total"
        :column="tableColumn"
        @change-page="getData"
      >
        <template #tool>
          <a-button type="primary" @click="passApplyHandle" v-if="activeKey === '1'">通过</a-button>
          <a-button type="primary" @click="refuseApplyHandle" v-if="activeKey === '1'">驳回</a-button>
          <a-button type="primary" @click="cancelOrderHandle" v-if="activeKey === '2'">取消保险单</a-button>
          <a-button type="primary" @click="exportHandle">导出</a-button>
        </template>
        <template #addressType="{ row }">
          <a-tag v-if="row.addressType === 'AMAZON'" color="#108ee9">{{ getLabelByDict("WAYBILL_TYPE", row.addressType) }}</a-tag>
          <a-tag v-if="row.addressType === 'WALMART'" color="#2db7f5">{{ getLabelByDict("WAYBILL_TYPE", row.addressType) }}</a-tag>
          <a-tag v-if="row.addressType === 'PERSONALWAR'" color="#f50">{{ getLabelByDict("WAYBILL_TYPE", row.addressType) }}</a-tag>
        </template>

        <template #insuranceNature="{ row }">
          <span>{{ getLabelByDict("INSURANCE_NATURE", row.insuranceNature) }}</span>
        </template>

        <template #insuranceType="{ row }">
          <span>{{ getLabelByDict("INSURANCE_TYPE", row.insuranceType) }}</span>
        </template>

        <template #action="{ row }">
          <a-button type="link" @click="showInsuranceApprovalHandle(row)" v-if="activeKey === '1'">审核</a-button>

          <a-button type="link" @click="cancelOrderOneHandle(row)" v-if="['2'].includes(activeKey)">取消保险单</a-button>
          <a-button type="link" @click="showInvoiceHandle(row)">查看发票</a-button>
        </template>
      </super-table>
    </div>
    <!-- 抽屉 -->
    <a-drawer
      class="custom-drawer"
      v-model:visible="drawerOpts.visible"
      :title="drawerOpts.title"
      :maskClosable="false"
      :closable="true"
      @close="searchHandle"
      :width="drawerOpts.width"
      placement="right"
    >
      <component
        v-model:visible="drawerOpts.visible"
        :is="drawerOpts.component"
        :activeKey="activeKey"
        :type="drawerOpts.type"
        :pass-data="drawerOpts.passData"
        @submit="drawerSubmitHandle"
      ></component>
    </a-drawer>
    <!-- 弹窗 -->
    <a-modal v-model:visible="dialogOpts.visible" :maskClosable="false" :keyboard="false" :closable="false" :footer="null" :title="dialogOpts.title" :width="dialogOpts.width">
      <component v-model:visible="dialogOpts.visible" :is="dialogOpts.component" :type="dialogOpts.type" :pass-data="dialogOpts.passData" @submit="dialogSubmitHandle"></component>
    </a-modal>
  </div>
</template>
<script lang="ts">
import ShowInvoice from "@/views/waybillManagement/stockManagement/components/showInvoice/index.vue";
import InsuranceReview from "./components/insuranceReview/index.vue";
export default {
  name: "InsuranceApproval",
  components: {
    ShowInvoice,
    InsuranceReview
  }
};
</script>
<script setup lang="ts">
import InitHook from "./composables/initHook";
import TableHeightHook from "@/hook/tableHeightHook";
import { searchItemList } from "./data";
import OperationHook from "./composables/operationHook";
import CommonHook from "@/hook/commonHook";
import ModalHook from "@/hook/modalHook";
const { tableHeight, loading } = TableHeightHook(110);
const { tableData, searchForm, tableRef, drawerOpts, activeKey, pageStat, dialogOpts } = InitHook();
const { downloadFileByUrl, getLabelByDict } = CommonHook();
const {
  searchHandle,
  getData,
  changeTabHandle,
  tableColumn,
  refuseApplyHandle,
  passApplyHandle,
  cancelOrderHandle,
  showInvoiceHandle,
  cancelOrderOneHandle,
  showInsuranceApprovalHandle,
  exportHandle
} = OperationHook({
  searchForm,
  loading,
  tableData,
  tableRef,
  downloadFileByUrl,
  activeKey,
  pageStat,
  drawerOpts,
  dialogOpts
});
searchHandle();
const { drawerSubmitHandle, dialogSubmitHandle } = ModalHook({
  drawerOpts,
  dialogOpts,
  callBack: () => searchHandle()
});
</script>
<style lang="stylus" scoped></style>
